﻿<script type='text/javascript' src='js/OpenLayers-2.12/OpenLayers.js'></script>
<script src='http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAjpkAC9ePGem0lIq5XcMiuhR_wWLPFku8Ix9i2SXYRVK3e45q1BQUd_beF8dtzKET_EteAjPdGDwqpQ'></script>
<style>
	body {
		font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
		font-size: small;
		margin: 0 auto;
		width: 900px;
	}
	#map_element {
		margin: 0 auto;
		position: relative;
		width: 795px;
		height: 420px;
		border: 1px solid black;
	}
</style>
<script type='text/javascript'>

var map;

function init() {
	
	OpenLayers.ProxyHost = "proxy.php?url=";
	
	var bounds = new OpenLayers.Bounds(
		107.817883080344, 15.9140867740137,
		108.337590000029, 16.2251302357152
		//508414.1875, 1766000.25,
		//534872.6875, 1786073.875
	);
	
	var options = {
		controls: [
			new OpenLayers.Control.Navigation(),
			new OpenLayers.Control.PanZoomBar(),
			new OpenLayers.Control.LayerSwitcher({'ascending': true}),
			new OpenLayers.Control.MousePosition(),
			new OpenLayers.Control.ScaleLine(),
			new OpenLayers.Control.OverviewMap()
		],
		numZoomLevels: 10,
		maxExtent: bounds,
		maxResolution: 0.0020301051550195,
		projection: "EPSG:4326",
		units: 'degrees'
	};
	map = new OpenLayers.Map('map_element', options);
			
	var layer_QuanHuyen = new OpenLayers.Layer.WMS(
		'Quan Huyen',
		'http://localhost:8081/geoserver/DATN/wms',
		{
			layers: 'DATN:DNQH',
			styles: '',
			transparent: 'true',
		},
		{
		   singleTile: true, 
		   ratio: 1,
		   isBaseLayer: true,
		   yx : {'EPSG:4326' : false}
		} 
	);
	map.addLayer(layer_QuanHuyen);
	
	var layer_GiaoThong = new OpenLayers.Layer.WMS(
			'Giao Thong',
			'http://localhost:8081/geoserver/DATN/wms',
			{
				layers: 'DATN:DNGT',
				styles: '',
				transparent: 'true',
			},
			{
			   singleTile: true, 
			   ratio: 1, 
			   yx : {'EPSG:4326' : false}
			} 
		);
		map.addLayer(layer_GiaoThong);
		
		var layer_Hotel = new OpenLayers.Layer.WMS(
			'Khách Sạn',
			'http://localhost:8081/geoserver/DATN/wms',
			{
				layers: 'DATN:DNHotel',
				styles: '',
				transparent: 'true',
			},
			{
			   singleTile: true, 
			   ratio: 1, 
			   yx : {'EPSG:4326' : false}
			} 
		);
		map.addLayer(layer_Hotel);
	
	var gphy = new OpenLayers.Layer.Google(
                "Google Physical",
                {type: G_PHYSICAL_MAP}
            );
            var gmap = new OpenLayers.Layer.Google(
                "Google Streets", // the default
                {numZoomLevels: 20}
            );
            var ghyb = new OpenLayers.Layer.Google(
                "Google Hybrid",
                {type: G_HYBRID_MAP, numZoomLevels: 20}
            );
            var gsat = new OpenLayers.Layer.Google(
                "Google Satellite",
                {type: G_SATELLITE_MAP, numZoomLevels: 22}
            );
	map.addLayer(ghyb);
			
	var usBounds = new OpenLayers.Bounds(
                107.817883080344, 15.9140867740137, 108.337590000029, 16.2251302357152
            );
	map.addControl (new OpenLayers.Control.Permalink('Xem toàn bộ'));
	info = new OpenLayers.Control.WMSGetFeatureInfo({
		url: 'http://localhost:8081/geoserver/DATN/wms', 
		title: 'Identify features by clicking',
		queryVisible: true,
		layers : [layer_Hotel],
		eventListeners: {
			getfeatureinfo: function(event) {
				map.addPopup(new OpenLayers.Popup.FramedCloud(
					"chicken", 
					map.getLonLatFromPixel(event.xy),
					null,
					event.text,
					null,
					true
				));
			}
		}
	});
	map.addControl(info);
	info.activate();
	map.zoomToExtent(usBounds);
	// Zoom the map to the max extent 
	if(!map.getCenter()){
		//map.zoomToMaxExtent();
		map.zoomToExtent(usBounds);
	}
}
</script>

<body onload='init();'>
    <div id='map_element'>
	</div>
	<div id="nodelist">
		<em>Click on the map to get feature info</em>
	</div>
</body>